<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8"/>
    <title>表单</title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="format-detection" content="telephone=no"/>

    <link rel="stylesheet" href="/layui/plugins/layui/css/layui.css" media="all"/>
    <script src="/main/js/jquery.min.js"></script>
    <script src="/main/js/template-web.js"></script>
    <script src="/layui/plugins/layui/layui.js"></script>
</head>

<body>

<input type="hidden" id="user2" th:value="${session.user}"/>
<div style="margin: 15px;">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>发表文章</legend>
    </fieldset>

    <form class="layui-form" action="" style="height: 100%">
        <div class="layui-form-item">
            <label class="layui-form-label">文章标题</label>
            <div class="layui-input-block">
                <input type="text" name="title" id="title" lay-verify="title" autocomplete="off" placeholder="请输入标题"
                       class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">文章摘要</label>
            <div class="layui-input-block">
                <textarea id="segment" name="segment" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <!--        <div class="layui-form-item layui-form-text">-->
        <!--            <label class="layui-form-label">文章标题图片</label>-->
        <!--            <div class="layui-input-block">-->
        <!--                <textarea id="segment" name="segment" placeholder="请输入内容" class="layui-textarea"></textarea>-->
        <!--            </div>-->
        <!--        </div>-->
        <div class=" layui-form-item layui-upload">
            <label class="layui-form-label">长传凭据</label>

            <div class="layui-input-block">
                <button type="button" class="layui-btn" name="paper_image" id="test2">图片上传</button>
                <blockquote  class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                    预览图：
                    <div class="layui-upload-list" id="demo1"></div>
                </blockquote>
            </div>
        </div>
        <script>
                // //文件上传
                // layui.use('upload', function(){
                // var jquery = layui.jquery
                // ,upload = layui.upload;
                //     $.ajax({
                //         type : "GET",
                //         elem : '#test2',
                //         before : function(obj){
                //                 //预读本地文件示例，不支持ie8
                //                 obj.preview(function(index, file, result){
                //                 $('#demo1').attr('src', result); //图片链接（base64）
                //             });},
                //         done : function(res){
                //                 //如果上传失败
                //                 if(res.code > 0){
                //                 layer.msg('上传失败');
                //             }
                //                 //上传成功
                //                 layer.msg('上传成功');
                //                 //将图片的名字放在表单中，添加的时候得放在数据库里面
                //                 $(function(){
                //                 $("#demo1").val(res.msg);
                //                 //alert('赋值成功');
                //             })
                //             },
                //         error : function(){
                //                 //演示失败状态，并实现重传
                //                 var demoText = $('#demoText');
                //                 demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                //                 demoText.find('.demo-reload').on('click', function(){
                //                 uploadInst.upload();
                //             });
                //             },
                //         dataType : "json",
                //         url : '/uploadFile/',
                //         timeout : 20000,
                //         cache : false,
                //         success:function (data) {
                //
                //         }
                //     });
                // });
                //文件上传

                layui.use('upload', function(){
                var $ = layui.jquery
                ,upload = layui.upload;

                //普通图片上传
                var uploadInst = upload.render({
                elem: '#test2'
                ,url: '/uploadFile' //改成您自己的上传接口
                ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                $('#demo1').attr('src', result); //图片链接（base64）
            });
            }
                ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                layer.msg('上传失败');
            }
                //上传成功
                layer.msg('上传成功');
                //将图片的名字放在表单中，添加的时候得放在数据库里面
                $(function(){
                $("#fileName").val(res.msg);
                //alert('赋值成功');
            })
            }
                ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                uploadInst.upload();
            });
            }
            });
            });
        </script>

        <div class="layui-form-item">
            <label class="layui-form-label">新建标签</label>
            <div class="layui-input-block">
                <input id="newTag" type="text" name="newTag" lay-verify="title" autocomplete="off"
                       placeholder="请输入标签 [可选]" class="layui-input"/>
            </div>
        </div>

        <input id="main1" name="main1" type="hidden" lay-verify="title" autocomplete="off" class="layui-input"/>


        <div class="layui-form-item">
            <label class="layui-form-label">标签选择</label>
            <script type="text/html" id="tag">
                <div class="layui-input-block">
                    {{if flag}}
                    {{each list value i}}
                    <input type="checkbox" name="tag[{{i}}]" value="{{value}}" title="{{value}}"/>
                    {{/each}}
                    {{else}}
                    <input type="checkbox" name="tag[]" disabled="" title="还没有标签 去新建一个吧"/>
                    {{/if}}

                </div>
            </script>
            <script type="text/javascript">
                //						alert(parent.getUser);
                //                        alert(parent.newContent);
                function getvalue() {
                    document.getElementById("main1").value = parent.newContent;
                }


                var tag1 = '';
                $(document).ready(function () {
                    var user2 = document.getElementById("user2").value;
                    url = '/tag/findAllTagsByName/' + user2;
                    $.ajax({
                        type: "post",
                        dataType: "json",
                        url: url,
                        timeout: 20000,
                        cache: false,
                        success: function (data) {
                            tag1 = template('tag', data);
                            document.getElementById('content2').innerHTML = tag1;
                        }
                    });
                })
            </script>
            <div id="content2"></div>
        </div>
        <div class="layui-form-item">
        <label class="layui-form-label">文章主题:</label>
        <script type="text/html" id="theme1">
            <div class="layui-input-block">

<!--                <select name="theme">-->
<!--&lt;!&ndash;                <select name="theme" lay-filter="aihao" id="">&ndash;&gt;-->
                {{each list value i}}
                <input type="checkbox" name="column[{{i}}]" th:name="theme" value="{{value}}" title="{{value}}"/>
                {{/each}}
<!--                </select>-->
                <!--                <select name="theme" lay-filter="aihao">-->
                <!--                    <option th:each="list : ${lists}" th:value="${list.title}" th:text="${list.title }">-->
                <!--                </select>-->
            </div>
        </script>

        <script type="text/javascript">
            var theme1 = '';
            $(document).ready(function () {
                url = '/column/findAllColumn';
                $.ajax({
                    type: "post",
                    dataType: "json",
                    url: url,
                    timeout: 20000,
                    cache: false,
                    success: function (data) {
//                alert(JSON.stringify(data.column[0]));
//                         var i;
//                         for(i in data.lists){
//                             theme1 = template('theme1', data.lists[i])+theme1;
//                         }
                        theme1 = template('theme1', data);
                        document.getElementById('content6').innerHTML = theme1;
                    }
                });
            })
        </script>
        <div id="content6"></div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="demo1" onclick="getvalue()">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<script>
    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form,
            layer = layui.layer,
            layedit = layui.layedit,
            laydate = layui.laydate;

        //监听提交
        form.on('submit(demo1)', function (data) {
//					layer.alert(JSON.stringify(data.field), {
//						title: '最终的提交信息'
//					});
            var Final = JSON.stringify(data.field);
            var user2 = document.getElementById("user2").value;
            $.ajax({
                type: "post",
                data: data.field,
                dataType: "json",
                url: "/paper/insertAll/" + user2,
                timeout: 20000,
                cache: false,
                success: function (data) {
                    if (data == 1) {
                        parent.layer.closeAll('iframe');
                    } else {
                        layer.alert("出错了");
                        layer.closeAll('iframe');
                    }

                }
            });
            return false;
        });
    });
</script>
</body>

</html>